import React, {FC, useEffect} from 'react'
import {Row, Col, Form, Select, InputNumber} from 'antd'
import styles from './index.less'
import {PageType} from '../constant'

interface CreditInformationType {
	creditInformationFrom: any
	pageType: string
	dict: any
	detailRecord?: Record<string, any>
}

const creditInformation: FC<CreditInformationType> = ({
	creditInformationFrom,
	dict,
	pageType,
	detailRecord,
}) => {
	useEffect(() => {
		if (pageType !== PageType.add && detailRecord) {
			const obj = {
				hasCrime:
					detailRecord.hasCrime !== undefined
						? String(detailRecord.hasCrime)
						: '',
				hasLoan:
					detailRecord.hasLoan !== undefined
						? String(detailRecord.hasLoan)
						: '',
				loan: detailRecord.loan,
				hasDebt:
					detailRecord.hasDebt !== undefined
						? String(detailRecord.hasDebt)
						: '',
				debt: detailRecord.debt,
			}
			creditInformationFrom.setFieldsValue(obj)
		}
	}, [pageType, detailRecord])

	return (
		<div className={styles.creditInformation}>
			<div className={styles.titleBox}>信用信息</div>
			<div style={{padding: '12px 0'}}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="creditInformationFrom"
					form={creditInformationFrom}
					disabled={pageType === PageType.detail}>
					<Row>
						<Col span={8}>
							<Form.Item name="hasCrime" label="犯罪记录">
								<Select
									showSearch
									placeholder={
										pageType === PageType.detail
											? ''
											: '请选择'
									}
									options={(dict.yes_no || []).map(
										(item: any) => ({
											label: item.dictValue,
											value: item.dictKey,
										}),
									)}
								/>
							</Form.Item>
						</Col>
						<Col span={16}> </Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item name="hasLoan" label="民间贷款记录">
								<Select
									showSearch
									placeholder={
										pageType === PageType.detail
											? ''
											: '请选择'
									}
									options={(dict.yes_no || []).map(
										(item: any) => ({
											label: item.dictValue,
											value: item.dictKey,
										}),
									)}
								/>
							</Form.Item>
						</Col>

						{Form.useWatch('hasLoan', creditInformationFrom) ===
							'0' && (
							<Col span={8}>
								<Form.Item
									name="loan"
									label="贷款金额"
									rules={[
										{
											pattern:
												/^([0-9]|[1-9]\d+)(\.\d{0,2})?$/,
											message: '小数点后不得超过两位',
										},
									]}>
									<InputNumber
										step="0.01"
										max={9999999}
										placeholder={
											pageType === PageType.detail
												? ''
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
						)}
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item name="hasDebt" label="是否存在债务">
								<Select
									showSearch
									placeholder={
										pageType === PageType.detail
											? ''
											: '请选择'
									}
									options={(dict.yes_no || []).map(
										(item: any) => ({
											label: item.dictValue,
											value: item.dictKey,
										}),
									)}
								/>
							</Form.Item>
						</Col>
						{Form.useWatch('hasDebt', creditInformationFrom) ===
							'0' && (
							<Col span={8}>
								<Form.Item
									name="debt"
									label="债务金额"
									rules={[
										{
											pattern:
												/^([0-9]|[1-9]\d+)(\.\d{0,2})?$/,
											message: '小数点后不得超过两位',
										},
									]}>
									<InputNumber
										step="0.01"
										max={9999999}
										placeholder={
											pageType === PageType.detail
												? ''
												: '请输入'
										}
									/>
								</Form.Item>
							</Col>
						)}
					</Row>
				</Form>
			</div>
		</div>
	)
}

export default creditInformation
